JQuery 之 event.target 与 event.currentTarget
这几天在使用jquery的过程中多次使用到event事件处理，过程中不免碰到了一些问题，今天就来总结一下下喽~~
场景一:
1
2
3
| jQuery(document)
.on('dblclick','#tab tbody tr td:not([class="checkGroup"])',function(event){
})
|
监听特定td双击事件 event.target 则为首先触发双击事件的节点 $(this) 也能起到相同的作用
场景二:
1
2
3
| jQuery(document)
.on('click','.list-collections',function(event){
})
|
监听list-collections’单击事件 event.currentTarget则保证选中的节点元素为list-collections 忽略其内部元素的事件。
场景一中遇到的问题：
使用$(this)或者$(event.target)获得的元素的属性或值，通过var 变量暂存时，出现数据多余的现象（之前触发事件的元素的属性和值一直存在），最后采用了无var的形式得以解决，可具体原因还未清楚，待考察！！!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| $(this).addClass('tdToUpdate');
//获得单元格的内容
// var val= $('#tab tbody tr td.tdToUpdate').text();
// var idStr = $('#tab tbody tr td.tdToUpdate').parent().find('td._id').text();
// var tdClasses =$('#tab tbody tr td.tdToUpdate').attr("class").split(" ");
// var tdClass = tdClasses[0];
val = $('#tab tbody tr td.tdToUpdate').text();
tdClasses = $('#tab tbody tr td.tdToUpdate').attr("class").split(" ");
tdClass = tdClasses[0];
//判断是否应该弹出层
if(tdClass!='_id' && tdClass!='updateTime' && tdClass!='createTime'){
//设置弹出div的位置
$("#runDiv").css("left",x);
$("#runDiv").css("top",y);
$("#runDiv").show();
$('#newText').focus().val(val).select();
}
$('#runDiv button').click(function(){
var idStr = $('#tab tbody tr td.tdToUpdate').parent().find('td._id').text();
var saveBtnName = $('#runDiv button[name^="save"]').attr('name');
var btnName = $(this).attr('name');
if(btnName==saveBtnName){
var newStr = $('#newText').val();
var urlStr='/updateRow';
var contentStr='{"collectionName":"'+collectionName+'","idStr":"'+idStr
+'","key":"'+tdClass+'","newVal":"'+newStr+'"}';
//判断当前列对应的id是否存在，存在则进行update操作，否则进行insert操作
if(idStr==null || idStr==""){
urlStr='/addRow';
contentStr='{"collectionName":"'+collectionName
+'","key":"'+tdClass+'","newVal":"'+newStr+'"}';
}
var contentJson=JSON.parse(contentStr);
if(newStr!=val){//判断单元格的内容是否有变化
。。。。。。。。。
if(!("ops" in data)){//说明此时是通过update传回的值
if(data.ok==1 && data.n==1){
$('#tab tbody tr td.tdToUpdate').text(newStr);//页面展现新改变的内容
$('#tab tbody tr td.tdToUpdate').removeClass('tdToUpdate');
}
}else{//通过insert传回的值
if(data.insertedCount!=0){
。。。。。。。
$('#tab tbody tr td.tdToUpdate').parent().find('td._id').text(newId);//展现新增加数据的id
$('#tab tbody tr td.tdToUpdate').removeClass('tdToUpdate');
}
}
}
}
});
delete (val);
delete (tdClasses);
delete (tdClass);
$("#runDiv").hide();
|
